<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
			}

			li {
				height: 35px;
				margin-bottom: 50px;
				border: 5px solid black;
			}

		</style>
	</head>
	<body>
		<ul id="box">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
<script>
	// join(separator) join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。
	var arr = ["a", "b", "c"];
	var str = arr.join();
	console.log(str);
	str = arr.join("-");
	console.log(str);
	str = arr.join("");
	console.log(str);

	arr = [, , ,];
	console.log(arr.length);

	str = arr.join("abc");
	console.log(str);

	function repeatingStr(str, n) {
		var arr = [];
		arr.length = n + 1;
		return arr.join(str);
	}
	console.log(repeatingStr("abc", 3));


	// push 往数组末尾追加元素, 返回变化后的数组的长度
	arr = ["a", "b", "c", "d"];
	var l = arr.push("e", "f", "g");
	console.log(arr);
	console.log(l);

	// pop 删除数组的最后一个元素, 返回被删除的元素
	var r = arr.pop();
	console.log(arr);
	console.log(r);

	// shift删除数组的第一个元素, 并返回删除的元素
	r = arr.shift();
	console.log(arr);
	console.log(r);

	// unshift给数组开始位置添加元素, 返回改变过后的数组的长度
	r = arr.unshift(1, 2);
	console.log(r);
	console.log(arr);

	// sort会先把元素的值转化成字符串(toString) 按照Unicode编码进行升序排列
	arr = ["a", "ab", "bc", "ad", "z", "x", "h"];
	arr.sort();
	console.log(arr);

	arr = [1, 11, 2, 23, 45, 123];
	arr.sort();
	console.log(arr);


	function compare(a, b) {
		// a - b 升序排列
		// b - a 降序排列
		return a - b;
	}
	// sort参数可以是函数
	arr.sort(compare);
	console.log(arr);

	// reverse()数组逆序
 	arr = [2, 3, 1, 0, 4, 5];
 	arr.reverse();
 	console.log(arr);

 	// concat将参数添加到原数组中。这个方法会先创建当前数组一个副本
 	arr = [1, 2, 3];
 	r = arr.concat(4, 5, 6, [9, 10, 11], [[1]]);
 	// [1, 2, 3, 4, 5, 6, 9, 10, 11, [1]];
 	console.log(r);
 	console.log(arr);

 	// slice截取, 用法同字符串的slice方法
 	arr = ["a", "b", "c", "d"];
 	r = arr.slice(1, -2);
 	console.log(arr);
 	console.log(r);

 	// splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。
 	// r = arr.splice(0, 1);
 	// console.log(arr);
 	// console.log(r);

 	// r = arr.splice(0, 0, 1);
 	// console.log(r);
 	// console.log(arr);

 	// 第一个参数: 删除的元素的起始位置
 	// 第二个参数: 删除的元素的个数
 	// 后面的参数: 插入的元素
 	r = arr.splice(0, 1, "b", 'e');
 	console.log(arr);


 	// indexOf()和 lastIndexOf() 参考字符串方法
	// indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。 
	// lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。


	arr = ["a", "c", 5, 7];
	// forEach遍历数组, 参数为回调函数, 回调函数的第一个参数: 数组中的元素, 第二个参数: 下标, 第三个参数: 数组本身
 	arr.forEach(function(e, index, a) {
 		console.log(e, index, a === arr);
 	});

 	function waigeEach(arr, func) {
 		for (var i = 0; i < arr.length; i++) {
 			func(arr[i], i, arr);
 		}
 	}
 	waigeEach(arr, function(e, index, a) {
 		console.log(e, index, a === arr);
 	});

	// eg
	// 获取box下面的所有li
	// 根据选择器查找元素
	var lis = document.querySelectorAll("#box>li");
	console.log(lis);

	var colorArr = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
	colorArr.forEach(function(e, i) {
		console.log(e, i);
		lis[i].style.background = e;
		lis[i].style.width = 200 + 50 * i + 'px';
	});


	// map 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
	arr = [1, 2, 3, 4, 5];
	var r = arr.map(function(item, index, a) {
		console.log(item, index, a);
		return item * item;
	});
	console.log(r);

	// 返回一个单词首字母都大写的数组
	arr = ['i', 'love', 'you', 'hello', 'good'];
	r = arr.map(function(item) {
		var str = item.slice(0, 1).toUpperCase() + item.slice(1);
		return str;
	});
	console.log(r);


	// filter() “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
	arr = [1, 2, 3, 4, 5, 6, 7];
	r = arr.filter(function(e, index) {
		// if (e % 2 == 0) {
		// 	return true;
		// } else {
		// 	return false;
		// }
		// if (e % 2 == 0) {
		// 	return true;
		// }
		// return false;
		return e % 2 == 0;
	});
	console.log(r);

	// 判断数组中存放的是不是都是闰年
	// every, 如果每个回调都返回true, 函数才返回true
	arr = [2008, 400, 4, 1996, 100];
	r = arr.every(function(item) {
		if (item % 4 == 0 && item % 100 != 0 || item % 400 == 0) return true;
		return false;
	});
	if (r) console.log("都是闰年");
	else console.log("不都是闰年");

	// some(), 有一个回调返回值为true, 结果就为true
	// 判断数组中的元素有没有个位或者十位是7的数(数组中都是<100的数)
	arr = [1, 2, 3, 4, 14, 71];
	r = arr.some(function(item) {
		// if (item % 10 == 7 || Math.floor(item / 10) == 7) return true;
		// return false;
		return item % 10 == 7 || Math.floor(item / 10) == 7;
	});
	if (r) console.log("有");
	else console.log("没有");

	console.log("-----------");
	arr = [1, 2, 3, 4, 5];


	//这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

	// 这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

 	// 传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
	var sum = arr.reduce(function(prev, cur, index, a) {
		// 第一个参数: 前一个值
		// 第二个参数: 当前值
		// 第三个参数: 当前值所在下标
		// 第四个参数: 数组本身
		console.log(prev, cur, index, a);
		return prev + cur;
	}, 0);
	console.log(sum);


	console.log("----------------");
	sum = arr.reduceRight(function(prev, cur, index, a) {
		console.log(prev, cur, index, a);
		return prev + cur;
	}, 0);
	console.log(sum);






</script>